<template>

  <div id="search_box">
    <div id="search_div">
      <el-icon id="search_icon" :size="25" :color="'rgb(83,168,255)'">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
      </el-icon>
      <div id="search_input_div" class="inputDeep">
        <el-input :rows="2" id="search_input" v-model="userKeyWord" placeholder="输入关键字搜索" />
      </div>
      <el-button @click="searchHandle" id="search_button" type="primary">搜索</el-button>
    </div>
  </div>

  <div id="result-box">

    <div v-for="result in searchResult" class="common-video-container">
      <VideoBox :video_img="result.video_img" :video_author="result.video_author"
                :video_id="result.video_id" :video_time="result.video_time" :video_title="result.video_title"/>
    </div>

  </div>

</template>

<script setup>
import {ref} from "vue";
import VideoBox from "../../components/common/VideoBox.vue";

const userKeyWord = ref('');

const searchResult = ref([])

function searchHandle(){
  searchResult.value = [
    {
      video_title: "这是视频标题",
      video_img: "这是视频封面",
      video_id: "这是视频ID",
      video_author: "视频作者昵称",
      video_time: "视频上传时间"
    }
  ]
}

</script>

<style scoped>
#search_button{
  position: absolute;

  height: 2.3rem;
  width: 6rem;

  top: 0.6rem;
  right: 0.5rem;
}

#search_input{
  width: 100%;
  height: 100%;
}

#search_input_div{
  position: absolute;
  width: 29rem;
  height: 2.5rem;
  left: 4rem;
  top: 0.5rem;

  /*background-color: #a0cfff;*/
}

#search_icon{
  position: absolute;
  left: 1.5rem;
  top: 1rem;
}

#search_div{
  position: absolute;
  height: 3.5rem;
  width: 40rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 0.5rem;

  background-color: #f5f5f5;
}

#search_box{
  position: relative;
  width: 100%;
  height: 3.5rem;
  background-color: white;
  padding-top: 1.5rem;
  padding-bottom: 5rem;

  box-shadow: rgba(28, 31, 33, 0.1) 0px 1px 1px 0px;
}
</style>

<style>

#search_input_div>.el-input>.el-input__wrapper>.el-input__inner{
  height: 2.5rem;
  background-color: #f5f5f5;
  border: 0;
  font-size: 1.2rem
}

#search_input_div>.el-input{
  --el-input-text-color: black;
  --el-input-border-color: #f5f5f5;
  --el-input-focus-border-color: #f5f5f5;
  --el-input-hover-border-color: #f5f5f5;
}

#search_input_div>.el-input>.el-input__wrapper{
  padding: 0;
}

#search_input_div>.el-input::-webkit-input-placeholder {
  color:#AEABAB;
  font-size: 1.2rem;
}
#search_input_div>.el-input::-ms-input-placeholder {
  color:#AEABAB;
  font-size: 1.2rem;
}
</style>
